import React ,{Component} from 'react';
import {Link,withRouter} from 'react-router-dom'
import classnames from 'classnames'
import '../../../assets/css/iconfont.css'
import './style.css'


class NavBar extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             url:document.location.pathname
        }
        console.log(props);
    }
    clickNav = () =>{
      
        this.setState({
            url:document.location.pathname
        })
        console.log(this.state.url); 
        
    }

    goSearch = () =>{
        this.props.history.push({pathname:"/search",state:{name:"秦始皇",age:"99",friend:"haha"}})
        
        console.log(this.props);
    }
    

        render(){
            return (
                <div className="nav-bar">
                    <div className="nav-content">
                        <div className="nav">
                            <span className="iconfont icon-caidan nav-menu "></span>
                            <span className="nav-title">云音悦</span>
                            <span className="iconfont icon-sousuo nav-search" onClick={this.goSearch}></span>
                        </div>
                        <div className="select">
                            <div onClick={this.clickNav}>
                                <Link to="/" className={classnames({ 'selected': this.state.url === '/' })} >
                                推荐
                                </Link>
                            </div>
                            <div onClick={this.clickNav}>
                                <Link to="/signer" className={classnames({ 'selected': this.state.url === '/signer' })} >
                                    歌手
                                </Link>
                            </div>
                            <div onClick={this.clickNav}>
                                <Link to="/rankinglist" className={classnames({ 'selected': this.state.url === '/rankinglist' })}>
                                    排行榜
                                </Link>
                            </div>
                    </div>
                    </div>
                    <div className="box"></div>
                </div>
            );
        }
    
}

export default withRouter(NavBar);